<template>
  <view class="hire_page">
    <view class="header">
      <view class="_w-max _top _left _z-index-2 _pos-fixed _top _left"  :style="{ 'background-color': 'rgba(76, 145, 250,' + srollOpacity + ')' }">
        <view :style="{ width: '100%', height: recHeight }"></view>
        <view class="felx_c h_96 f_s_18"  :style="{ color: 'rgb(' + srollColor + ','  + srollColor + ',' + srollColor +')'}"><image class="back-img" src="../static/back.png" mode="" @tap="goBack" />签到积分</view>
      </view>
      <view class="integral-box" @tap="handleIntegralDetail">
        <view class="num">{{userInfo.integral || 0}}</view>
        <view class="detail">积分明细<text>></text></view>
      </view>
      <image class="integral-img1" src="../static/sign_in_intergal1.png" mode="" />
    </view>
    <view class="container">
        <view class="sign-in-box">
          <view class="hd">
            <view class="left">
              <view class="title">每日签到</view>
              已连续签到<text class="num">&nbsp;{{signCount}}&nbsp;</text>天
            </view>
           <!-- <view class="right">
              签到提醒<switch checked @change="switch1Change" class="switch-input" color="#4C91FA"  style="transform:scale(0.6)" />
            </view> -->
          </view>
          <view class="list">
              <view class="item" v-for="(item, index) in signListData" :key="index">
                <view class="top" :class="sign_index >= index + 1 ? 'active' : ''">
                  <view class="score-num">+{{item.sign_num}}</view>
                  <image class="integral-score-img" src="../static/sign_in_intergal.png" mode="" />
                </view>
                <view class="bottom" :class='(index+1) == signListData.length ? " rewardTxt" : ""'>{{(item.day==$t(`第七天`) || item.day==$t(`第7天`))?$t(`奖励`):$t(item.day)}}</view>
              </view>
          </view>
          <view class="btn signed" v-if="userInfo.is_day_sgin">{{$t(`已签到`)}}</view>
          <view class="btn" @tap="goSign" v-else>{{$t(`签到`)}}</view>
        </view> 
        <view class="integral-use-box">
          <view class="title">积分用途</view>
          <view class="list">
              <view class="item" v-for="(item, index) in integralUseData" :key="index" @tap="goPage(item.id)">
                <view class="left-box">
                  <image class="integral-img2" src="../static/sign_in_intergal2.png" mode="" />
                  <view class="text-box">
                    <view class="text1">{{item.title}}</view>
                    <view class="text2">{{item.desc}}</view>
                  </view>
                </view>
                <view class="btn">{{item.id == 1 ? '去租车' : '去兑换'}}</view>
              </view>
          </view>
        </view> 
    </view>
    
    <uni-popup ref="popup" type="center" border-radius="40px 40px 40px 40px">
      <view class="sign-popup-box">
        <image class="integral-img3" src="../static/sign_in_intergal3.png" mode="" />
        <view class="title">恭喜您获得{{integral}}积分</view>
        <view class="desc">已连续签到{{signCount}}天</view>
        <view class="btn"  @tap="goClosePopup">确认</view>
        <image class="integral-img4" src="../static/sign_in_intergal4.png" mode="" />
      </view>
      <image class="integral-close-img" src="../static/sign_in_intergal_close.png" mode="" @tap="goClosePopup" />
    </uni-popup>
  </view>
</template>
<script>
import { getAllCity } from '@/api/car.js'
	import {
		postSignUser,
		getSignConfig,
		getSignList,
		setSignIntegral
	} from '@/api/user.js';

const concat = name => 'https://taxi.raxan.xyz/wechat/static/images/hire/' + name

const IMAGES = {
  BANNER: concat('banner.png'),
  NEWMOD: concat('u_xzscx.png'),
  BLUVEH: concat('u_veh_right.png'),
  CONPAN: concat('u_company_veh.png'),
  HIREOT: concat('u_hire_other.png'),
  USECAR: concat('u_use_car.png')
}

const navList = [
  { label: '全部', value: 1 },
  { label: '新能源', value: 2 },
  { label: '轿车', value: 3 },
  { label: 'SUV', value: 4 },
  { label: 'MPV', value: 5 },
  { label: '微面', value: 6 },
]

export default {
  data() {
    return {
      userInfo: {},
      recHeight: 0,
      imgs: IMAGES,
      srollOpacity: 0,
      srollColor: 255,
      integralUseData: [
        {
          id: 1,
          title: '订单减免',
          desc: '300积分换1元',
          status: 0,
        },
        {
          id: 2,
          title: '积分商城兑换',
          desc: '积分好礼等你换',
          status: 1,
        },
      ],
      signListData: [
        // {
        //   score: '+10',
        //   date: '11.27',
        //   status: 1
        // },
      ],
      signCount: 0,
      signList: [],
      sign_index: 0,
      integral: 0,
    }
  },
  onPageScroll(e) {
    this.srollColor = e.scrollTop < 100 ? 255 - Math.floor(e.scrollTop * 2.55) : 0;
    this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 && e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
  },
  onShow() {

  },
  onLoad() {
    this.getPhoneInfo();
    this.getUserInfo();
    this.getSignSysteam();
    this.getSignList()
  },
  methods: {
    goPage(id){
      if(id == 1){ // 去租车
          uni.switchTab({
            url: `/pages/car_index/index`
          })
      }else{ // 去兑换
          uni.navigateTo({
            url:  `/pages/integral_mall/index`
          })
      }
    },
    /**
     * 获取用户信息
     */
    getUserInfo: function() {
    	let that = this;
    	postSignUser({
    		sign: 1
    	}).then(res => {
        this.userInfo = res.data;
        console.log('this.userInfo', this.userInfo)
        this.signCount = res.data.sum_sgin_day;
        this.sign_index = res.data.sign_num;
    		// res.data.integral = parseInt(res.data.integral);
    		// let sum_sgin_day = res.data.sum_sgin_day;
    		// that.$set(that, 'userInfo', res.data);
    		// that.signCount = that.PrefixInteger(sum_sgin_day, 4);
    		// that.sign_index = res.data.sign_num;
    	});
    },
    /**
     * 获取签到配置
     */
    getSignSysteam: function() {
    	let that = this;
    	getSignConfig().then(res => {
        this.signListData = res.data;
    	})
    },
    handleIntegralDetail(){
      uni.navigateTo({
        url: `/pages/users/sign_in_integral/detail`
      })
    },
    goBack(){
      uni.navigateBack()
    },
    switch1Change: function (e) {
          console.log('switch1 发生 change 事件，携带值为', e.detail.value)
    },
    checkLoading(fn) {
      uni.showLoading({ title: '加载中' })
      fn().finally(uni.hideLoading)
    },
    // 获取顶部高度信息
    getPhoneInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
        }
      });
    },
    /**
     * 用户签到
     */
    goSign: function(e) {
    	let that = this,
    		sum_sgin_day = that.userInfo.sum_sgin_day;
    	if (that.userInfo.is_day_sgin) return this.$util.Tips({
    		title: that.$t(`您今日已签到!`)
    	});
    	setSignIntegral().then(res => {
        this.$refs.popup.open('center')
        
    		that.integral = res.data.integral;
    		that.sign_index = (that.sign_index + 1) > that.signListData.length ? 1 : that
    			.sign_index + 1;
    		that.signCount = sum_sgin_day + 1;
    		that.$set(that.userInfo, 'is_day_sgin', true);
    		that.$set(that.userInfo, 'integral', that.$util.$h.Add(that.userInfo.integral, res.data
    			.integral));
    		that.getSignList();
    	}).catch(err => {
    		return this.$util.Tips({
    			title: err
    		})
    	});
      
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      // this.$refs.popup.open('center')
    },
    goClosePopup(){
       this.$refs.popup.close()
    },
   // 获取签到列表
    getSignList: function() {
    	let that = this;
    	getSignList({
    		page: 1,
    		limit: 3
    	}).then(res => {
        this.signList = res.data;
        console.log('signList', this.signList)
    	})
    },
  }
}
</script>
<style lang="scss" scoped>
  .sign-popup-box{
    position: relative;
    width: 566rpx;
    padding-bottom: 46rpx;
    background: linear-gradient( 136deg, #E5F2FE 0%, #FFFFFF 44%, #E6EFFE 100%);
    box-shadow: inset 0rpx 4rpx 10rpx 0rpx rgba(153,153,153,0.1);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #F7FAFC;
    text-align: center;
    .integral-img3{
      width: 175rpx;
      height: 178rpx;
      margin-top: -70rpx;
    }
    .integral-img4{
      width: 160rpx;
      height: 158rpx;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .title{
      font-size: 48rpx;
      color: #8C2508;
      font-weight: bold;
      margin-top: 0rpx;
      margin-bottom: 28rpx;
    }
    .desc{
      font-size: 26rpx;
      color: #8C2508;
    }
    .btn{
      margin: 60rpx auto 0;
      width: 342rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-weight: 600;
      font-size: 26rpx;
      color: #FFFFFF;
      background: linear-gradient( 270deg, #F94846 0%, #FFA952 100%);
      box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(244,53,49,0.25);
      border-radius: 74rpx 74rpx 74rpx 74rpx;
    }
  }
  .integral-close-img{
    display: block;
    width: 38rpx;
    height: 38rpx;
    margin: 28rpx auto 0;
  }
  .back-img{
    position: absolute;
    left: 10rpx;
    width: 48rpx;
    height: 48rpx;
  }
  .header{
    padding: 0 26rpx;
    height: 600rpx;
    position: relative;
    background: linear-gradient(180deg, #4C91FA 0%, #F5F5F5 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .integral-box{
    position: absolute;
    left: 62rpx;
    top: 240rpx;
    z-index: 3;
    .num{
      font-weight: 600;
      font-size: 90rpx;
      color: #FFFFFF;
    }
    .detail{
      font-size: 26rpx;
      color: #FFFFFF;
      text{
        margin-left: 16rpx;
      }
    }
  }
  .integral-img1{
    position: absolute;
    top: 220rpx;
    right: 24rpx;
    width: 324rpx;
    height: 236rpx;
    z-index: 2;
  }

.h_96 { height: 96rpx; }
.c_fff { color: #FFFFFF; }
.f_s_18 { font-size: 36rpx; }

.felx_c {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hire_page {
  box-sizing: border-box;
  position: relative;
  min-height: 100vh;
  background: #F8F9FC;
  color: rgba(0, 0, 0, 0.9);
}

.container{
  width: 700rpx;
  margin: -160rpx auto 0;
  position: relative;
  z-index: 2;
  .sign-in-box{
     width: 700rpx;
     background: #FFF;
     padding: 32rpx;
     background: #FFF;
     border-radius: 32rpx;
     box-sizing: border-box;
    .hd{
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26rpx;
      color: #B0B0B0;
      .left{
        display: flex;
        align-items: center;
        .title{
          margin-right: 16rpx;
          font-weight: 600;
          font-size: 36rpx;
          color: #1A1A1A;
        }
        .num{
          color: #4C91FA;
        }
      }
      .right{
        display: flex;
        align-items: center;
       .switch-input{
         margin-left: 12rpx;
       } 
      }
    }
    .list{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item{
        // width: 82rpx;
        text-align: center;
        margin-right: 14rpx;
        margin-bottom: 14rpx;
        &:nth-child(7n){
          margin-right: 0;
        }
        &:last-child{
          margin-bottom: 0;
        }
        .top{
          width: 77rpx;
          height: 132rpx;
          padding: 30rpx 0;
          box-sizing: border-box;
          background: #FAFAFA;
          border-radius: 37rpx 37rpx 37rpx 37rpx;
          color: #67A1F9;
          &.active{
            background: #4C91FA;
            color: #fff;
          }
          .score-num{
            font-weight: 500;
            font-size: 24rpx;
            // color: #67A1F9;
          }
          .integral-score-img{
              width: 72rpx;
              height: 73rpx;
          }
        }
        .bottom{
          margin-top: 10rpx;
          font-weight: 500;
          font-size: 20rpx;
          color: #1A1A1A;
          line-height: 30rpx;
          &.rewardTxt{
            width: 74rpx;
            height: 32rpx;
            background-color: #f4b409;
            border-radius: 16rpx;
            font-size: 20rpx;
            color: #a57d3f;
            line-height: 32rpx;
          }
        }
      }
    }
    .btn{
      margin: 30rpx auto 0;
      width: 296rpx;
      height: 84rpx;
      line-height: 84rpx;
      text-align: center;
      font-weight: 500;
      font-size: 28rpx;
      color: #FFFFFF;
      background: #4C91FA;
      border-radius: 38rpx 38rpx 38rpx 38rpx;
      &.signed{
         background: #999;
      }
    }
  }
  .integral-use-box{
    padding: 32rpx;
    background: #FFF;
    border-radius: 32rpx;
    margin-top: 30rpx;
    .title{
      margin-bottom: 32rpx;
      font-weight: 600;
      font-size: 32rpx;
      color: #1A1A1A;
    }
    .list{
      .item{
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 28rpx;
         background: #FAFAFA;
         padding: 20rpx;
         border-radius: 26rpx 26rpx 26rpx 26rpx;
         .left-box{
           display: flex;
           align-items: center;
         }
         .integral-img2{
           width: 113rpx;
           height: 113rpx;
           margin-right: 10rpx;
         }
         .text-box{
            .text1{
              margin-bottom: 6rpx;
              font-weight: 500;
              font-size: 28rpx;
              color: #1A1A1A;
            }
            .text2{
              font-size: 22rpx;
              color: #B0B0B0;
            }
         }
         .btn{
           width: 124rpx;
           height: 60rpx;
           line-height: 60rpx;
           text-align: center;
           background: #4C91FA;
           border-radius: 38rpx 38rpx 38rpx 38rpx;
           font-weight: 500;
           font-size: 26rpx;
           color: #FFFFFF;
         }
         
      }
    }
  }
}


</style>